<template>
	<!-- 默认使用系统头部，如需开启自定义头部配置
     1. pages.json -> globalStyle -> navigationStyle: custom 
     2. common -> config -> navbar: custom 
  -->
	<view v-if="iShow">
		<view class="use-navbar w-full pos-t-full" style="padding-bottom: 6px;"
			:style="{ 'background': bgColor, 'opacity': bgOpacity }"
			:class="{ 'fixed': fixed, 'bg-main': type == 'white', 'bg-dark': type == 'gray' }">
			<view class="w-full" :style="{ height: menuButtonInfo.top + 'px' }"></view>

			<!-- 头部导航 -->
			<view class="dflex-b border-radius-lg padding-lr-sm w-full use-hover"
				:style="{ height: navbarTitleHeight + 'px' }">
				<view class="wpre-15 dflex">
					<view v-if="back" class="" @click="toback">
						<uni-icons type="left" color="#5e6d82" size="22" />
					</view>
					<block v-else>
						<slot name="left" />
					</block>
				</view>
				<view class="wpre-75">
					<block v-if="type == 'custom'">
						<slot name="title" />
					</block>
					<block v-else>
						<text class="fwbd fs">{{ apptitle }}</text>
					</block>
				</view>
				<view class="wpre-10 dflex-e">
					<slot name="right" />
				</view>
			</view>
		</view>

		<!-- 头部组件占位符 -->
		<view v-if="fixed && placeholder" :style="{ height: navbarHeight + 'px' }"></view>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref, watch, computed } from 'vue';
	import { useUserStore } from '@/store/index';
	import config from '@/config/config.ts'
	import Util from '@/utils/Util.ts';

	export default defineComponent({
		name: 'use-navbar',
		props: {
			fixed: {
				type: [Number, Boolean],
				default: true
			},
			placeholder: {
				type: [Number, Boolean],
				default: true
			},
			back: {
				type: Boolean,
				default: null
			},
			title: {
				type: String,
				default: null
			},
			type: {
				type: String,
				default: 'gray'
			},
			leftIcon: {
				type: String,
				default: 'icon-fanhuijiantou'
			},
			bgColor: {
				type: String,
				default: '#44bdf5'
			},
			bgOpacity: {
				type: Number,
				default: .97
			},
			show: {
				type: Boolean,
				default: null
			}
		},
		setup(props) {
			const UserStore = useUserStore();
			const apptitle = ref('');
			const statusBarHeight = ref(0);
			const systemInfo = ref({});

			watch(() => props.title, (nv, ov) => {
				apptitle.value = nv;
			});

			const menuButtonInfo = computed(() => {
				// ...计算属性逻辑
				let menuButtonInfo = {
					top: 6
				};
				// #ifdef MP-WEIXIN
				menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log('menuButtonInfo', menuButtonInfo);
				// #endif
				
				// #ifdef H5-WEIXIN
				menuButtonInfo.top = 6;
				// #endif
				
				return menuButtonInfo;
			});

			const navbarCustomHeight = computed(() => {
				// ...计算属性逻辑
				// return this.systemInfo.customBar;
			});

			const navbarStatusHeight = computed(() => {
				// ...计算属性逻辑
				// #ifdef MP-WEIXIN
				return 32;
				// #endif
				// #ifdef APP-PLUS || H5
				return this.systemInfo.statusBar;
				// #endif
			});

			const navbarTitleHeight = computed(() => {
				// ...计算属性逻辑
				return 32;
			});

			const navbarHeight = computed(() => {
				// ...计算属性逻辑
				if (iShow) {
					return menuButtonInfo.value.top + navbarTitleHeight.value + 5;
				}
				
				return 0;
			});

			const leftIconfont = computed(() => {
				// ...计算属性逻辑
			});


			const iShow = computed(() => {
				// ...计算属性逻辑
				console.log(props.show)
				return props.show !== null ? props.show : config.navbar == 'custom';
			});

			function toback() {
				if (getCurrentPages().length < 2) {
					Util.tohome();
					return;
				}
				
				uni.navigateBack({
					delta: 1
				});
			}

			return {
				apptitle,
				statusBarHeight,
				systemInfo,
				menuButtonInfo,
				navbarCustomHeight,
				navbarStatusHeight,
				navbarTitleHeight,
				navbarHeight,
				leftIconfont,
				config,
				iShow,
				toback
			};
		}
	});
</script>

<style lang="scss">
	.use-navbar-placeholder {
		min-height: 32px;
	}

	.use-navbar {
		min-height: 32px;
		z-index: 99;
		backdrop-filter: blur(3px);
		background-color:rgba(255,255,255,0.35);
	}

	/*状态栏*/
	.status-bar {
		/* ...样式逻辑 */
	}
</style>